<template>
  <!-- 邀友模块 -->
  <div class="inviteFriendsReward">
    <div class="inviteFriendsReward-box items-center">
      <img
        class="inviteFriendsReward-bg"
        src="/image/lottery-v3/inviteFriendsReward-bg-icon.svg"
      />
      <div class="inviteFriendsReward-text">
        {{ $t("lotteryMoney.snmfxzk").split("xxx")[0] }}
        <span class="inviteFriendsReward-text-value">10</span>
        {{ $t("lotteryMoney.snmfxzk").split("xxx")[1] }}
      </div>
      <div class="inviteFriendsReward-right items-center">
        <div
          class="inviteFriendsReward-btn"
          :class="{
            'inviteFriendsReward-btn-start':
              source.registerUserList &&
              source.registerUserList.length == source.limitInviteUserCount,
          }"
        >
          {{ $t("lotteryMoney.receive") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="inviteFriendsReward">
// import { useGlobalStore } from "~~/store/global";
// import { useLotteryV3Store } from "~~/store/modules/lottery-v3";

const props = withDefaults(
  defineProps<{
    source: any;
  }>(),
  {
    source: {},
  }
);
</script>
<style lang="scss" scoped>
.inviteFriendsReward {
  position: relative;
  background-color: #fff;
  margin: 10 * 2px 15 * 2px;
  padding: 10 * 2px;
  border-radius: 12 * 2px;

  &-box {
    position: relative;
    min-height: 91 * 2px;
    justify-content: space-between;
  }
  &-bg {
    position: absolute;
    top: 0 * 2px;
    right: 0 * 2px;
    width: 100%;
    min-height: 91 * 2px;
  }
  &-text {
    position: relative;
    z-index: 9;
    margin-bottom: 5 * 2px;
    margin-left: 12 * 2px;
    color: #807666;
    font-size: 14 * 2px;
    font-weight: 590;

    &-value {
      color: #d5602e;
      font-size: 17 * 2px;
      font-weight: 900;
    }
  }
  &-right {
    position: relative;
    z-index: 9;
    margin-bottom: 5 * 2px;
    width: 100 * 2px;
    justify-content: center;
  }
  &-btn {
    position: relative;
    z-index: 9;
    padding: 4.5 * 2px 10 * 2px;
    border-radius: 100px;
    background: rgba(220, 88, 0, 0.5);

    color: #fff;
    font-size: 14 * 2px;
    font-weight: 590;

    &-start {
      @keyframes scaleLqbtn {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
        }

        100% {
          transform: scale(1);
        }
      }
      animation: scaleLqbtn 0.7s linear infinite alternate;
      background: #fff;
      color: #ff9b01;
    }
  }
}
</style>
